<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>优品-购物车</title>
	<link rel="icon" href="/static/cart/img/favicon.ico" type="/image/x-icon" />
	<link rel="stylesheet" href="/static/cart/css/One_bdyStyle.css">
	<link rel="stylesheet" href="/static/cart/css/index.css">
	<link rel="stylesheet" href="/static/cart/css/One_mainFoot.css">
	<script src="/static/cart/js/jquery-3.1.1.min.js" charset="utf-8"></script>
</head>

<body>
	<header>
		<div class="header">
			<ul class="header-left">
				<li>
					<a href="http://yomall.com">优品首页</a>
				</li>
			</ul>
			<ul class="header-right">
				<li>
					<a th:if="${session.loginUser==null}" href="http://auth.yomall.com/login.html">你好，请登录</a>
					<a th:if="${session.loginUser!=null}">欢迎，[[${session.loginUser.nickname}]]</a>
				</li>
				<li>
					<a th:if="${session.loginUser==null}" href="http://auth.yomall.com/reg.html" class="li_2">免费注册</a>
				</li>
				<li class="spacer"></li>
				<li><a href="">我的订单</a></li>
				<li class="spacer"></li>
			</ul>
			<div style="clear: both;"></div>
		</div>
	</header>

	<div class="one_search">
		<div class="one_sousuo">
			<div class="one_search_top">
				<div class="one_top_left">
					<a href="http://yomall.com" class="one_left_logo">
						<img src="/static/cart/img/logo.png">
					</a>
				</div>
				<div class="one_top_right">
					<input type="text" class="one_right_txt" placeholder="" onfocus="this.placeholder=''"
						onblur="this.placeholder='' ">
					<input type="button" value="搜索" class="one_right_btn">
				</div>
			</div>
			<div class="one_search_load" th:if="${session.loginUser==null}">
				<img src="/static/cart/img/shop_07.jpg" class="one_load_wraing">
				<span>您还没有登录！登录后购物车的商品将保存到您账号中</span>
				<a href="#"><input type="button" onclick="login()" value="立即登录" class="one_load_btn"></a>
			</div>
		</div>
	</div>
	<div class="One_BdyShop">
		<div class="OneBdy_box">
			<div class="One_tabTop">
				<div class="One_Topleft">
					<span>全部商品 </span>
				</div>
			</div>
			<div class="One_ShopTop">
				<ul>
					<li><input type="checkbox" class="allCheck"> 全选 </li>
					<li>商品</li>
					<li>单价</li>
					<li>数量</li>
					<li>小计</li>
					<li>操作</li>
				</ul>
			</div>

			<div class="One_ShopCon">
				<div style="height:35px;line-height: 35px; border-bottom: 2px solid #999;">
					<p style="float: left;margin-left: 10px;">
						<input type="checkbox" />
						<span style="background: #da0012;color: #fff;padding: 2px;">优品自营</span>
					</p>
				</div>
				<ul th:if="${cart.items!=null}">
					<!-- 购物车-->
					<li th:each="item:${cart.items}">
						<div> </div>
						<div>
							<ol>
								<li>
									<input type="checkbox" class="check" onchange="checkSku(this)"
										   th:checked="${item.check}" th:attr="skuId=${item.skuId}" />
								</li>
								<li>
									<dt><img th:src="${item.image}" alt=""></dt>
									<dd style="width: 300px">
										<p>
											<span th:text="${item.title}">Apple iPhone 12 Pro Max (A2412) </span><br>
											<span th:each="attr:${item.skuAttr}" th:text="${attr}">128GB 石墨色</span>
										</p>
									</dd>
								</li>
								<li>
									<p class="dj" th:text="'￥'+${#numbers.formatDecimal(item.price,3,2)}">￥9299.00</p>
								</li>
								<li>
									<p th:attr="skuId=${item.skuId}">
										<span class="countOps">-</span>
										<span class="itemCount" th:text="${item.count}" style="font-weight: bold;color: #333;">1</span>
										<span class="countOps">+</span>
									</p>
								</li>
								<li style="font-weight:bold">
									<p class="zj" th:text="'￥'+${#numbers.formatDecimal(item.totalPrice,3,2)}">￥9299.00</p>
								</li>
								<li>
									<p class="deleteItemBtn" th:attr="skuId=${item.skuId}">删除</p>
								</li>
							</ol>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="One_ShopFootBuy fix1">
				<div>
					<ul>
						<li><input type="checkbox" class="allCheck"><span> 全选 </span></li>
						<li>删除选中的商品</li>
						<li>清空购物车</li>
					</ul>
				</div>
				<div>
					<font style="color:#e64346;font-weight:bold;" class="sumNum"> </font>&nbsp;
					<ul>
						<li><img src="/static/cart/img/buyNumleft.png" alt=""></li>
						<li><img src="/static/cart/img/buyNumright.png" alt=""></li>
					</ul>
				</div>
				<div>
					<ol>
						<li>
							总价:
							<span style="color:#e64346;font-weight:bold;font-size:16px;" class="fnt"
								  th:text="'￥'+${#numbers.formatDecimal(cart.totalAmount,3,2)}">
								￥9299.00
							</span>
						</li>
					</ol>
				</div>
				<div><button onclick="toTrade()" type="button">去结算</button></div>
			</div>
		</div>
	</div>

	<div class="One_isDel">
		<p>
			<span>删除</span><span><img src="/static/cart/img/error.png" alt=""></span>
		</p>
		<div>
			<dl>
				<dt><img src="/static/cart/img/warning.png" alt=""></dt>
				<dd>
					<li>删除商品？</li>
					<li>您可以选择移到关注，或删除商品。</li>
				</dd>
			</dl>
		</div>
		<div>
			<button type="button" onclick="deleteItem()">删除</button>
		</div>
	</div>
	<div class="One_moveGzIfNull">
		<p>
			<span>删除</span><span><img src="/static/cart/img/error.png" alt=""></span>
		</p>
		<dl>
			<dt><img src="/static/cart/img/warning.png" alt=""></dt>
			<dd>请至少选中一件商品！</dd>
		</dl>
	</div>
	<div class="One_moveMyGz">
		<p>
			<span>删除</span><span><img src="/static/cart/img/error.png" alt=""></span>
		</p>
		<div>
			<dl>
				<dt><img src="/static/cart/img/warning.png" alt=""></dt>
				<dd>
					<li>移到关注</li>
					<li>移动后选中商品将不再购物车中显示</li>
				</dd>
			</dl>
		</div>
		<div>
			<button type="button">确定</button>
			<button type="button">取消</button>
		</div>
	</div>
	<div class="One_clearShop">
		<p>
			<span>提示</span><span><img src="/static/cart/img/error.png" alt=""></span>
		</p>
		<dl>
			<dt><img src="/static/cart/img/warning.png" alt=""></dt>
			<dd>没有下柜商品!</dd>
		</dl>
	</div>
</body>
<script src="/static/cart/js/index.js" charset="utf-8"></script>
<script type="text/javascript">
	function toTrade() {
		window.location.href = "http://order.yomall.com/toTrade";
	}

	function toItem(skuId) {
		window.location.href = "http://item.yomall.com/" + skuId + ".html";
	}

	function login() {
		var s = encodeURIComponent("http://cart.yomall.com/cartList");
		window.location.href = "http://auth.yomall.com/login.html?returlUrl=" + s;
	}

	//去结算
	$(".One_ShopFootBuy>div:last-child button").mouseover(function () {
		$(this).css("cursor", "pointer");
	})
	$(".One_ShopFootBuy>div:last-child button").click(function () {
		$(".One_mb").show();
		$(".One_DengLu").show();
	})
	//buyNum
	$(".One_ShopFootBuy>div:nth-child(2)").mouseover(function () {
		$(this).css("cursor", "pointer")
	})
	$(".One_ShopFootBuy>div:nth-child(2)").click(function () {
		$(this).children("ol").toggle();
		$(this).children("ul").toggle();
		var dis = $(".One_ShopFootBuy>div:nth-child(2) ol").css("display");
		if (dis == "none") {
			$(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(0)")
		} else if (dis == "block") {
			$(".One_ShopFootBuy>div:nth-child(2) img").css("transform", "rotateX(180deg)")
		}
	})
	$(".One_Local>ul>li").eq(0).children("ol").css("display", "block")
	$(".One_Local>ul>li").mouseover(function () {
		var i = $(this).index();
		$(this).css("cursor", "pointer");
		$(this).children("ol").css("display", "block")
	}).mouseout(function () {
		$(".One_Local>ul>li").eq(0).children("ol").css("display", "block")
		$(this).children("ol").css("display", "none")
	})

	$(".One_Local>ul>li>ol li").mouseover(function () {
		$(this).css({
			"cursor": "pointer",
			"color": "#e64346"
		})
	}).mouseout(function () {
		$(this).css("color", "#005AA0")
	})

	$(".One_Local>ul>li>ol li").click(function () {
		$(this).parent().parent().children("label").html($(this).html())
	})

	//购物车全选反选
	$(".One_ShopTop ul li:first-child .allCheck").click(function () {
		if ($(".One_ShopTop ul li:first-child .allCheck").is(":checked")) {
			$(".check").prop("checked", true);
			$(".check").parent().parent().parent().css("background", "#fff4e8");
			$(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true)
		} else {
			$(".check").parent().parent().parent().css("background", "none");
			$(".check").prop("checked", false);
			$(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false)
		}
	})
	$(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").click(function () {
		if ($(".One_ShopFootBuy>div:first-child ul li:first-child .allCheck").is(":checked")) {
			$(".check").prop("checked", true);
			$(".check").parent().parent().parent().css("background", "#fff4e8");
			$(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", true)
		} else {
			$(".check").parent().parent().parent().css("background", "none");
			$(".check").prop("checked", false);
			$(".One_ShopBottom>div:first-child span:first-child .allCheck").prop("checked", false)
		}
	})
	$(".One_ShopBottom>div:first-child span:first-child .allCheck").click(function () {
		if ($(".One_ShopBottom>div:first-child span:first-child .allCheck").is(":checked")) {
			$(".check").prop("checked", true);
			$(".check").parent().parent().parent().css("background", "#fff4e8");
		} else {
			$(".check").parent().parent().parent().css("background", "none");
			$(".check").prop("checked", false);
		}
	})
	//如果子选择框没有选中则父选框取消全选
	$(".check").click(function () {
		$(".check").each(function () {
			if ($(this).prop("checked") == true) {
				$(".allCheck").prop("checked", false);
			}
		})
	})
	//子选择框全部选中复选框也选中
	$(".check").click(function () {
		if ($(".check[class='check']:checked").length == $(".check[class='check']").length) {
			$(".allCheck").prop("checked", true);
		} else {
			$(".allCheck").prop("checked", false)
		}
	})
	//删除已选的商品
	$(".One_ShopFootBuy>div:first-child ul li:nth-child(2)").click(function () {
		if ($(".check").is(":checked") == false) {
			$(".One_mb").show();
			$(".One_moveGzIfNull").show();
		} else {
			$(".One_mb").show(); //蒙版显示
			$(".One_isDel").show(); //删除弹框显示
			$(".One_moveGzIfNull").hide();
		}
	})
	//确定删除弹框移入我的关注
	$(".One_isDel>div:last-child button:last-child").click(function () {
		$(".One_isDel").hide();
		$(".One_mb").show();
		$(".One_DengLu").show();
	})
	//移到我的关注
	$(".One_ShopFootBuy>div:first-child ul li:nth-child(3)").click(function () {
		$(".check").each(function (index) {
			if ($(this).is(":checked") == false) {
				$(".One_mb").show();
				$(".One_moveGzIfNull").show();
			} else {
				$(".One_mb").show();
				$(".One_moveMyGz").show();
				$(".One_moveGzIfNull").hide();
			}
		})
	})
	//点击×号关闭
	$(".One_moveGzIfNull>p span:last-child img").click(function () {
		$(".One_mb").hide();
		$(".One_moveGzIfNull").hide();
	})
	$(".One_moveMyGz>p span:last-child img").click(function () {
		$(".One_mb").hide();
		$(".One_moveMyGz").hide();
		$(".One_moveGzIfNull").hide();
	})
	$(".One_clearShop>p span:last-child img").click(function () {
		$(".One_mb").hide();
		$(".One_clearShop").hide();
	})
	//移到我的关注取消按钮点击关闭
	$(".One_moveMyGz>div:last-child button:last-child").click(function () {
		$(".One_mb").hide();
		$(".One_moveMyGz").hide();
	})
	//移到我的关注确定按钮点击登录弹框弹出
	$(".One_moveMyGz>div:last-child button:first-child").click(function () {
		$(".One_moveMyGz").hide();
		$(".One_mb").show();
		$(".One_DengLu").show();
	})

	$(".One_DengLu>p:first-child span:last-child img").click(function () {
		$(".One_mb").hide();
		$(".One_DengLu").hide();
	})
	//清除下柜商品
	$(".One_ShopFootBuy>div:first-child ul li:nth-child(4)").click(function () {
		$(".One_mb").show();
		$(".One_clearShop").show()
	})
	//购物车+ -
	//鼠标移入变小手
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span").mouseover(function () {
		$(this).css("cursor", "pointer")
	})
	//+
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:last-child").click(function () {
		var add = $(this).prev("span").html();
		add++;
		$(this).prev("span").html(add);
	})
	//-
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:first-child").click(function () {
		var jian = $(this).next("span").html();
		jian--;
		if (jian <= 0) {
			jian = 0;
		}
		$(this).next("span").html(jian);
	})
	//选中当前商品背景变色
	$(".check").each(function (index) {
		$(".check").eq(index).click(function () {
			if ($(this).is(":checked")) {
				$(this).parent().parent().parent().css("background", "#fff4e8");
				$(this).parent().parent().parent().parent().children("div:last-child").css("background", "#fff4e8")
			} else {
				$(this).parent().parent().parent().parent().children("div:last-child").css("background", "none")
				$(this).parent().parent().parent().css("background", "none")
			}
		})
	})
	//商品删除鼠标移入变色
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p").mouseover(function () {
		$(this).css({
			"cursor": "pointer",
			"color": "#e64346"
		});
	}).mouseout(function () {
		$(this).css({
			"cursor": "pointer",
			"color": "gray"
		});
	})
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:nth-child(2)").click(function () {
		$(".One_mb").show();
		$(".One_moveMyGz").show();
	})
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:last-child").click(function () {
		$(".One_mb").show();
		$(".One_DengLu").show();
	})
	//点击删除
	//点击删除出现弹框
	$(".One_isDel>p img").click(function () {
		$(".One_mb").hide();
		$(".One_isDel").hide();
	})
	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(6) p:first-child").click(function () {
		$(".One_mb").show();
		$(".One_isDel").show();
		var that = $(this);
	})
	$(".One_isDel>div:last-child button").mouseover(function () {
		$(this).css("cursor", "pointer");
	})

	$(".One_ShopFootBuy>div:first-child ul li:not(:first-child)").mouseover(function () {
		$(this).css({
			"cursor": "pointer",
			"color": "#e64346"
		})
	}).mouseout(function () {
		$(this).css("color", "black")
	})

	//封装总价钱函数
	// function sumSumPrice() {
	// 	console.log("计算总价");
	// 	var zzj = 0;
	// 	$(".check").each(function () {
	//
	// 		if ($(this).prop("checked")) {
	// 			console.log("check!!" + $(this).parents("ol").find(".zj").html());
	// 			var zj = $(this).parents("ol").find(".zj").html().substring(1);
	// 			console.log(" 价格：" + zj);
	// 			zzj = zzj + parseFloat(zj);
	// 		}
	// 		$(".fnt").html("￥" + zzj + ".00")
	// 	})
	// }
	// //封装总数量函数
	// function sumSumNum() {
	// 	var kong = 0;
	// 	$(".One_ShopCon ul li>div:nth-child(2) ol>li:nth-child(4) p:first-child span:nth-child(2)").each(function () {
	// 		kong += parseFloat($(this).html())
	// 	})
	// 	$(".sumNum").html(kong);
	// }

	$(".One_ShopCon ul li>div:nth-child(2)>ol>li:nth-child(2)>dd").mouseover(function () {
		$(this).css({
			"cursor": "pointer",
			"color": "#e64346"
		})
	}).mouseout(function () {
		$(this).css("color", "black")
	})

	// 购物项勾选
	function checkSku(chkbox) {
		let skuId = $(chkbox).attr("skuId")
		let checked = $(chkbox).prop("checked")
		let isCheckedFlag = checked ? "1" : "0"
		location.href = `http://cart.yomall.com/checkCart?skuId=${skuId}&isChecked=${isCheckedFlag}`
	}

	// 修改购物项数量
	$('.countOps').click(function(){
		let skuId = $(this).parent().attr('skuId')
		let num = $(this).parent().find('.itemCount').text()
		location.href = `http://cart.yomall.com/changeCount?skuId=${skuId}&num=${num}`
	})

	// 删除购物项
	let skuId = 0;
	$('.deleteItemBtn').click(function(){
		skuId = $(this).attr("skuId");
	})

	function deleteItem(){
		location.href = `http://cart.yomall.com/deleteItem?skuId=${skuId}`
	}

</script>

</html>